import styled from 'styled-components';
import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
import {
    ProForm,
    ProFormText,
    ProFormTextArea,
    ProFormGroup,
    ProFormSelect,
    ProFormItem
} from '@ant-design/pro-components';
import { Button, Transfer, Typography } from 'antd';
import type { TransferProps } from 'antd';

import { ProFormDataStorageInput, QiniuFileUpload, ProFormDataStorageInputProps } from '../../../components';
import { getNowFormatDate, uuid } from '../../../utils';
import { DataSource, dataSourceSaveDataSource, dataSourceUpdateDataSource, dataSourceUpdateDataSourceConfig, MetaDataDomain, metaDataGetMetaDatas, metaDataSaveDomain, metaDataUpdateDomain } from '../../../services';

export interface DataSourceConfigProps {
    style?: CSSProperties;
    item: DataSource;
    onFinish: () => Promise<void> | void;
}

export const DataSourceConfig: React.FC<DataSourceConfigProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [domains, setDomains] = useState<Array<MetaDataDomain>>([]);

    const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]);

    const refresh = async (dataSource: DataSource) => {
        try {
            let res = await metaDataGetMetaDatas();
            //
            if (dataSource) {
                let selected = dataSource.domain_identifiers.split(",");
                setTargetKeys(selected);
            }
            setDomains(res);
        } catch (error) {
            console.error(error);
        }
    };

    useEffect(() => {
        refresh(props.item);
    }, [props.item])

    const handleChange: TransferProps['onChange'] = (newTargetKeys) => {
        setTargetKeys(newTargetKeys);
    };

    const handleSearch: TransferProps['onSearch'] = (dir, value) => {
        console.log('search:', dir, value);
    };

    const filterOption = (inputValue: string, option: any) =>
        option.description.indexOf(inputValue) > -1;

    return (
        <Container>
            <DataSourceName>数据源:&nbsp;{props.item?.name}</DataSourceName>
            <Typography.Title level={5}>相关域配置</Typography.Title>
            <Transfer
                loading={loading}
                dataSource={domains.map((item, i) => {
                    return {
                        key: item.identifier,
                        title: item.title,
                        description: item.description,
                        chosen: false,
                    }
                })}
                showSearch
                filterOption={filterOption}
                targetKeys={targetKeys}
                onChange={handleChange}
                onSearch={handleSearch}
                render={(item) => item.title}
            />
            <Buttons>
                <Button
                    loading={loading}
                    style={{
                        width: '120px'
                    }}
                    type="primary" onClick={async () => {
                        console.log(targetKeys);
                        setLoading(true);
                        try {
                            let res = await dataSourceUpdateDataSourceConfig(props.item.identifier, targetKeys);
                            props.onFinish && await props.onFinish();
                        } catch (error) {
                            console.error(error);
                        }
                        setLoading(false);
                    }}
                >保存</Button>
            </Buttons>
        </Container >
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const DataSourceName = styled.div`
    line-height: 26px;
`;

const Buttons = styled.div`
    width: 100%;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
`;